// 变量定义
$spinner-size: 80px;
$spinner-border-width: 4px;
$text-size: 18px;
$colors: (
  'primary': #3498db,
  'success': #2ecc71,
  'danger': #e74c3c,
  'text': #2c3e50
);

// 混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin spinner-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: $spinner-border-width solid transparent;
  border-radius: 50%;
  animation: rotate 2s linear infinite;
}

// 动画关键帧
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

// 主样式
.loading {
  &-container {
    @include flex-center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  }

  &-content {
    text-align: center;
  }

  &-spinner {
    position: relative;
    width: $spinner-size;
    height: $spinner-size;
    margin: 0 auto 20px;

    .spinner-circle {
      @include spinner-circle;

      &:nth-child(1) {
        border-top-color: map-get($colors, 'primary');
        animation-delay: 0s;
      }

      &:nth-child(2) {
        border-right-color: map-get($colors, 'success');
        animation-delay: 0.5s;
      }

      &:nth-child(3) {
        border-bottom-color: map-get($colors, 'danger');
        animation-delay: 1s;
      }
    }
  }

  &-text {
    font-size: $text-size;
    color: map-get($colors, 'text');
    letter-spacing: 2px;

    span {
      display: inline-block;
      animation: pulse 1.5s infinite;
      animation-fill-mode: both;

      @for $i from 2 through 6 {
        &:nth-child(#{$i}) {
          animation-delay: #{($i - 1) * 0.2}s;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .loading {
    &-spinner {
      width: $spinner-size * 0.75;
      height: $spinner-size * 0.75;
    }
    
    &-text {
      font-size: $text-size * 0.9;
    }
  }
} 